<template>
<!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" style="width: 100%" height="750" border >
      <el-table-column label="广告主信息" align="center" width="240" :fixed="true">
        <template #default="{ row }">
          <div>{{ row.name }}<br/>ID：{{ row.id }}</div>
        </template>
      </el-table-column>
      <el-table-column label="行业" align="center" prop="firstIndustryName" min-width="180">
        <template #default="{ row }">
          {{ row.firstIndustryName }}/{{ row.secondIndustryName }}
        </template>
      </el-table-column>
      <el-table-column label="绑定时间" align="center" prop="bindTime" width="170"/>
      <el-table-column label="账户报备类型" align="center" min-width="140">
        <template #default="{ row }">
          {{ selfReverseMapping[row.selfOperationTag] }}
        </template>
      </el-table-column>
      <el-table-column label="一级代理商信息" align="center" min-width="200">
        <template #default="{ row }">
          <div>{{ row.firstAgentCompanyName }}<br/>ID：{{ row.firstAgentId }}</div>
        </template>
      </el-table-column>
      <el-table-column label="直客销售名称" align="center" prop="customerSaleName" min-width="120" />
      <el-table-column label="开户联系人" align="center" prop="contactName" min-width="120" />
      <el-table-column label="公司名称" align="center" prop="company" min-width="180" />
      <el-table-column label="营业执照图片" align="center" min-width="160">
        <template #default="{ row }">
          <el-image style="width: 70px; height: 50px" :src="row.licenseUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[row.licenseUrl]" fit="cover" preview-teleported />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="170" />
      <el-table-column label="状态" align="center" min-width="150">
        <template #default="{ row }">
          <el-tag type="danger" v-if="row.reason">{{ statusReverseMapping[row.status]}}</el-tag>
          <el-tag type="success" v-else>{{ statusReverseMapping[row.status] || '获取状态失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核拒绝原因" align="center" min-width="150">
        <template #default="{ row }">
          {{ row.reason || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="note" min-width="150" />
    </el-table>
    
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </ContentWrap>

</template>

<script setup lang="ts">
import { onMounted, ref, unref } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import { AdvertiserApi } from '@/api/weiyi/advertiserInfo'
import { SelfOperationTag, Status } from '@/enums/advertiser'

const loading = ref(false) // 列表加载状态
const total = ref(0) // 列表总数
const list = ref([]) // 列表数据
const queryParams = ref({ // 查询参数
  pageNo: 1,
  pageSize: 10,
})

/** 查询列表 */
const getList = async () => {
  try {
    loading.value = true
    // 处理时间范围
    const params = { ...unref(queryParams) }
    const response = await AdvertiserApi.getAdvertiserPage(params)
    
    console.log(111, response);
    
    // 检查响应结构，直接使用顶层的list和total属性
    if (response && response.advertiserInfoList) {
      list.value = response.advertiserInfoList || []
      total.value = response.pageInfo.totalNumber || 0
    } else {
      list.value = []
      total.value = 0
    }
  } catch (error) {
    list.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 将枚举值转换为映射，用于在表格中显示
const statusReverseMapping = Object.fromEntries(
  Object.entries(Status).filter(([key, value]) => typeof value === 'string')
);
const selfReverseMapping = Object.fromEntries(
  Object.entries(SelfOperationTag).filter(([key, value]) => typeof value === 'string')
);

/** 初始化 **/
onMounted(() => {
  getList()
})
</script> 